<template>
  <div>
    <!-- 头部日期 -->
    <header class="fcc jc-sb ml-10 mr-10">
      <p class="f999 border pl-5">2019-05-27</p>
      <p class="orange">清除</p>
    </header>
    <!-- 记录列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <li class="flex aic bg-fff mt-10" v-for="item in list" :key="item.index">
        <img
          v-lazy="` https://img.villaday.com${item.imgUrl}`"
          width="121px"
          height="81px"
          class="ml-10"
        >
        <div class="text w100pc ml-10">
          <h3 class="f16">{{item.name}}</h3>
          <p class="mt-20 f14">
            <span>{{item.price*0.01}}</span>
            <span class="ml-10 f999">人均:{{item.averageStr}}</span>
          </p>
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
import { constants } from "crypto";
export default {
  data() {
    return {
      list: [],
      loading: false,
      pageNum: 1,
      pageSize: 8,
      totalPge: "",
      finished: false
    };
  },
  methods: {
    //上拉加载 分页
    onLoad() {
      setTimeout(() => {
        let url = "/history/getList";
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
        this.$axios
          .post(url, data)
          .then(res => {
            // console.log(res, "res");
            this.totalPge = res.totalPge;
            res.list.forEach(lists => {
              this.list.push(lists);
            });
            // 数据全部加载完成
            if (res.list <= this.pageSize) {
              this.finished = true;
            }
          })
          .then(() => {
            this.pageNum++; //页数增替
            // console.log(this.list);
            // 加载状态结束
            this.loading = false;
          });
      }, 800);
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/history.less";
</style>

